<template>
    <div class="orderlist">
        <div style="background-color:#f6f6f6;"> 
            <tab active-color="#333333" 
                :line-width="2" 
                bar-active-color="#cccccc"
                class="tabStyle"
            >
                <tab-item :selected="types=='00'" @on-item-click="onItemClick">全部订单</tab-item>
                <tab-item :selected="types=='01'" @on-item-click="onItemClick">待支付</tab-item>
                <tab-item :selected="types=='02'" @on-item-click="onItemClick">已付款</tab-item>
                <tab-item :selected="types=='03'" @on-item-click="onItemClick">已完成</tab-item>
            </tab>
            <ul class="inteInfo routerWapper" v-infinite-scroll="getproductlist" 
                infinite-scroll-disabled="loading" infinite-scroll-distance="10"
            >
                <li class="order borderbox" v-for="(item,index) in orderList" :key="index" v-if="orderList.length!=0">
                    <p class="data ml10 mr10 h40 lh40">
                        <span v-if="item.orderStatus=='01'" class="ft">待支付</span>
                        <span v-if="item.orderStatus=='02'" class="ft">已付款</span>
                        <span v-if="item.orderStatus=='03'" class="ft">已完成</span>
                        <span>
                            <span class="fs12" @click="orderCancel(item)" v-if="item.orderStatus=='01'">取消订单</span>
                            <span class="sureClick fs12" @click="paynow(item)" v-if="item.orderStatus=='01'">立即支付</span>
                            <span class="sureClick fs12" @click="payfirm(item)" v-if="item.orderStatus=='07'">确认收货</span>
                        </span>
                    </p>
                    <div class="con pl10 pr10" v-for="(itemchild,indexchild) in item.orderDetailProductList" 
                        :key="indexchild"
                        @click="goorderdeta(item)"
                        >
                        <div class="conc borderbox">
                            <img :src="itemchild.productImg" alt="">
                            <div class="flex col flexJCA h100 pl10 pt10 pb10 borderbox" style="width:75%;">
                                <p class="fs16 bold">{{itemchild.productName | sliceString(15)}}</p>
                                <div class="flex row flexSpaceB">
                                    <p class="price bold">￥ {{itemchild.salePrice}}元</p>
                                    <p class="grayText">x{{itemchild.buyNumber}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="total flex flexSpaceB h40 lh40">
                        <span class="fs14">共{{[...item.orderDetailProductList].length}}件商品</span>
                        <span class="fs14">共计:￥{{item.payAmount}}</span>
                    </p>
                </li>
            </ul>
            <show-bg-img :isShow="showBg" title="暂无订单..."></show-bg-img>
        </div>
    </div>
</template>
<script>
// 01 未支付 02 已付款 03 确认收货
import { Toast, MessageBox, InfiniteScroll } from "mint-ui";
import { formats } from "src/methods/synchronous.js";
import {
    orderCancel,
    confirmReceipt,
    queryOrderList,
    integralExchangeProduct,
    hkbOrderpay
} from "src/methods/request.js";
import mixins from 'mixins';
import { Tab, TabItem } from 'vux';
export default {
    mixins: [mixins],
    data() {
        let orderType = this.$route.query.types || '00';
        return {
            orderList: [],
            orderStatus: "",
            loading:false,                  //加载更多状态
            orderType:'00',                 //默认订单类型
            currentPage:1,                  //保存当前页码
            types:orderType,                //订单类型
        };
    },
    components:{
        Tab,TabItem
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        }
    },
    created() {
        this.route = Object.assign({}, this.$route);
        this.$route.query.headName && this.$store.commit("increment", this.$route.query.headName);
    },
    methods: {
        //获取订单
        getproductlist(isClear) {//参数表示是否初始化当前页面
            this.$vux.loading.show({ text: "Loading" });
            //判断显示数据的类型 和 titile标题名称
            queryOrderList({ orderType: "01",currentPage: this.currentPage, perPage: 100,orderStatus:this.types }).then(res => {
                this.$vux.loading.hide();
                if (res.rspCode == "0000") {
                    this.orderList = res.data.orderList;
                    //isClear ? (this.orderList = res.data.orderList) : (this.orderList = this.orderList.concat(res.data.orderList));
                    isClear && (this.currentPage = 1);
                    if (res.data.totalPage <= this.currentPage) {
                        this.loading = true;
                    } else {
                        this.loading = false;
                        this.currentPage += 1;
                    }
                    for (var item of this.orderList) {
                        item.orderDate = formats(item.orderDate);
                        for (var items of item.orderDetailProductList) {
                            items.productImg = this.imgUrl + items.productImg;
                        }
                    }
                    // console.log(this.orderList)
                } else {
                    MessageBox("", "查询失败");
                }
                this.showBg = res.data.orderList.length == 0;
            }).catch(error => {
                this.$vux.loading.hide();
                this.showBg = res.data.orderList.length == 0;
            });
        },
        //取消订单
        orderCancel(item) {
            orderCancel({ orderNo: item.orderNo }).then(res => {
                if (res.data.resultCode == "00") {
                    MessageBox("", "取消成功");
                    this.getproductlist(true);
                } else {
                    MessageBox("", res.data.resultMesg || "支付失败");
                }
            });
        },
        //立即支付
        paynow(item) {
            var self = this;
            if (item.payType == "04") {
                this.$router.push({
                    path: "/hkbPayfrom",
                    query: { orderNo: item.orderNo }
                });
            } else if (item.payType == "02") {
                integralExchangeProduct({ orderNo: item.orderNo}).then(resp=>{
                    if(resp.rspCode == '0000' && resp.data.resultCode == '00'){
                        this.$router.push({ path: "/payMoneyEnd" });
                    }else if (resp.data.resultCode == "04") {
                        if (resp.data.content == undefined) {
                            MessageBox("", "支付系统异常");
                            return;
                        }
                        window.open(resp.data.content, "_self");
                    }else {
                        Toast({ message:'支付失败',position:'middle',duration:1000 });
                        this.$router.push({ path:"/payMoneyEnd",query:{failed:true}});
                    }
                }).catch(error => console.log(error));
            }
        },
        //订单详情查询
        goorderdeta(item) {
            this.$router.push({
                path: "/orderMoneyDetail",
                query: {
                    orderNo: item.orderNo
                }
            });
        },
        //确认收货
        payfirm(item) {
            // 发送请求
            confirmReceipt({ orderNo: item.orderNo })
                .then(response => {
                    let rep = Object.assign({}, response);
                    if (rep.rspCode == "0000") {
                        MessageBox("", "收货成功");
                        this.getproductlist(true);
                    } else {
                    }
                })
                .catch(error => console.log(error));
        },
        //点击切tab
        onItemClick(index){
            console.log(index)
            let state = "0" + index;
            if(state != this.types){
                this.types = state;
                this.orderList = [];
                this.getproductlist(true);
            }
        },
    }
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>